<template>
  <el-card style="width: 100%;height: 400px;">
    <template #header>
      <div class="card-header">
        <el-icon>
          <Flag/>
        </el-icon>
        <span> 借书指南</span>
      </div>
    </template>
    <el-steps :active="active" align-center>
      <el-step title="步骤一"/>
      <el-step title="步骤二"/>
      <el-step title="步骤三"/>
    </el-steps>

    <el-collapse v-model="active" accordion>
      <el-collapse-item title="步骤一" :name="1">
        <div>
          在登陆页面左下角点击注册账号，登陆账号，前往个人中心，点击修改我的信息<em>完善个人信息</em>。
        </div>
      </el-collapse-item>
      <el-collapse-item title="步骤二" :name="2">
        <div>
          在首页或者借阅服务页面，根据所知的书本名称，或其他书本信息，<em>搜索想要的书本</em>，得知书本条码后，前往借阅服务页面。
        </div>
      </el-collapse-item>
      <el-collapse-item title="步骤三" :name="3">
        <div>
          在借阅服务页面的借还台窗口中，输入对应的书本条码，输入借还信息，点击提交，即可借阅书本。
        </div>
      </el-collapse-item>
    </el-collapse>

    <el-row align="middle" justify="end" style="margin-top: 20px;">
      <el-button size="large" type="default" @click="prev">上一步</el-button>
      <el-button size="large" type="primary" @click="next">下一步</el-button>
    </el-row>
  </el-card>
</template>

<script setup lang="ts">
import {Flag} from '@element-plus/icons-vue'
import {ref} from 'vue'

const active = ref(0)

const next = () => {
  if (active.value++ > 3) active.value = 0
}

const prev = () => {
  if (active.value-- < 0) active.value = 3
}

</script>

<style scoped>

</style>